<template>
	<div class="system-feedback-container standard-container layout-padding layout-pd">
		<div class="review-list-title">
			<div class="title-actions">
				<el-button size="default" type="primary" class="ml10" @click="getTableData">
					<el-icon>
						<ele-Search />
					</el-icon>
					查询
				</el-button>

				<!-- <el-row :gutter="10">
          <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
            <el-form-item label="活动名称:">
              <el-input v-model="state.search.name" size="default" clearable placeholder="请输入活动名称" style="width: 100%"> </el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" v-show="state.isToggle">
            <el-form-item label="创建时间:">
              <el-date-picker
                type="datetimerange"
                v-model="state.search.searchDateTime"
                start-placeholder="创建开始时间"
                end-placeholder="创建时间"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
            <el-form-item class="table-form-btn" label-width="10px">
              <div class="table-form-btn-toggle ml10 cursor-pointer" @click="state.isToggle = !state.isToggle">
                <span>{{ state.isToggle ? '收筛选' : '展筛选' }}</span>
                <SvgIcon :name="state.isToggle ? 'ele-ArrowUp' : 'ele-ArrowDown'" />
              </div>
              <el-button size="default" type="primary" class="ml10" @click="getTableData">
                <el-icon>
                  <ele-Search />
                </el-icon>
                查询
              </el-button>
              <el-button size="default" type="primary" class="ml10" @click="onOpen('add', '')">
                <el-icon>
                  <ele-FolderAdd />
                </el-icon>
                新增活动
              </el-button>
            </el-form-item>
          </el-col>
        </el-row> -->
			</div>
		</div>

		<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
			<el-table-column label="反馈用户" show-overflow-tooltip>
				<template #default="scope">
          <div class="flex">
            <div>
              <el-avatar :size="50" :src="STATIC_URL + scope.row.avatar"/>
            </div>
            <div class="my-flex-center">
              {{ scope.row.nickname }}
            </div>
          </div>
				</template>
			</el-table-column>
			<el-table-column prop="type" label="反馈类型" show-overflow-tooltip></el-table-column>
			<el-table-column prop="content" label="反馈内容" show-overflow-tooltip></el-table-column>
			<el-table-column prop="type" label="反馈图片" show-overflow-tooltip>
				<template #default="scope">
					<div class="sd-flex">
            <div class="log-image img" v-for="(v, index) in scope.row.imagesList" :key="index">
              <el-image :src="STATIC_URL + v" fit="cover" class="image"
                        :preview-src-list="loadPreviewImages(scope.row.imagesList)" :preview-teleported="true"/>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="phone" label="联系电话" show-overflow-tooltip></el-table-column>
      <el-table-column prop="status" label="处理状态" show-overflow-tooltip>
        <template #default="scope">
          <el-tag v-if="scope.row.status == 1">已处理</el-tag>
          <el-tag v-else type="warning">未处理</el-tag>
        </template>
      </el-table-column>
			<el-table-column prop="remark" label="处理备注" show-overflow-tooltip>

			</el-table-column>
			<el-table-column prop="updateTime" label="修改时间" show-overflow-tooltip></el-table-column>
			<el-table-column prop="updateUsername" label="操作人" show-overflow-tooltip></el-table-column>
			<el-table-column label="操作" width="100">
				<template #default="scope">
          <el-button size="small" text type="primary" @click="onOpen(scope.row.id)">查看</el-button>
					<el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除 </el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination-container">
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				:page-sizes="[10, 15, 20, 30, 50, 100]"
				v-model:current-page="state.tableData.paging.currentPage"
				background
				v-model:page-size="state.tableData.paging.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.paging.totalCount"
			>
			</el-pagination>
		</div>
    <Dialog ref="DialogRef" @refresh="refresh"></Dialog>
	</div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
import { FeedbackApi } from '/@/api/shop/feedback';
import { STATIC_URL } from '/@/utils/config';
import { ElMessage, ElMessageBox } from 'element-plus';

const Dialog = defineAsyncComponent(() => import('./dialog.vue'));
const DialogRef = ref();
const state = reactive({
	isToggle: false,
	search: {
		name: '',
		searchDateTime: '',
	},
	tableData: {
		data: [],
		total: 0,
		loading: false,
		paging: {
			currentPage: 1,
			pageSize: 15,
			totalCount: 0,
			totalPages: 0,
		},
	},
});

const loadPreviewImages = (images: string[]) => {
	let previewImages: string[] = [];
	images.forEach((e) => {
		previewImages.push(STATIC_URL + e);
	});
	return previewImages;
};
const refresh = () => {
  onHandleCurrentChange(1)
}

// 分页改变
const onHandleSizeChange = (pageSize: number) => {
	state.tableData.paging.pageSize = pageSize;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (currentPage: number) => {
	state.tableData.paging.currentPage = currentPage;
	getTableData();
};

const getTableData = async () => {
	const { data } = await FeedbackApi().search({
		offset: (state.tableData.paging.currentPage - 1) * state.tableData.paging.pageSize,
		limit: state.tableData.paging.pageSize,
	});
	state.tableData.data = data.datas;
	state.tableData.paging.currentPage = data.paging.currentPage;
	state.tableData.paging.totalCount = data.paging.totalCount;
};

const onRowDel = (row: any) => {
	ElMessageBox.confirm(`此操作将永久反馈”，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			await FeedbackApi().delete(row.id);
			getTableData();
			ElMessage.success('删除成功');
		})
		.catch(() => {});
};

const onOpen = (id: string) => {
	DialogRef.value.openDialog(id);
};

onMounted(() => {
	getTableData();
});
</script>

<style scoped lang="scss">
.system-feedback-container {
	.el-table {
		flex: 1;
	}
}
.log-image {
	height: 48px;
	width: 48px;

  &.img {
    padding: 5px;
  }
}

.my-flex-center {
  padding-right: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 5px;
}
</style>
